/*
 * @Description: 下载按钮功能
 * @Author: Zzt
 * @Date: 2022-09-28 11:22:53
 * @LastEditTime: 2022-09-30 19:49:55
 */

import { fetchOriginalFormat } from '@/api/archives/archives';
import { Button, Popover } from 'antd';
import { useState } from 'react';

const RecordDownload = (props: any) => {
  const { selectItems, type, baseInfo } = props;

  // popover显示状态
  const [visible, setVisible] = useState(false);
  // 文件类型列表
  const [formatList, setFormatList] = useState([]);

  /**
   * @description: 请求文件格式并展示

   */
  const showFormatList = () => {
    fetchOriginalFormat({
      atCode: baseInfo.atCode,
      atType: baseInfo.atType,
      dbName: baseInfo.dbName,
      eFileId: selectItems,
      level: baseInfo.level
    }).then((res) => {
      const { data } = res;
      console.log(res);
      setFormatList(data);
      setVisible(true);
    });
  };

  /**
   * @description: 批量下载
   */
  const getMoreApi = () => {
    console.log('getApi');
  };

  /**
   * @description: 监听popover弹层显示状态方法
   * state为false时关闭。打开使用按钮控制
   * @param {boolean} visibleState
   * @return {*}
   */
  const handleOpenChange = (visibleState: boolean): void => {
    !visibleState && setVisible(visibleState);
  };

  /**
   * @description: 文件格式下拉列表
   */
  const download = (
    <>
      {formatList.map((item: any) => (
        <div key={item.file_ext}>
          <Button type="text" href={item.file_url}>
            {item.file_ext}
          </Button>
        </div>
      ))}
    </>
  );

  return selectItems.length > 1 ? (
    <Button type={type} onClick={getMoreApi} disabled={selectItems.length === 0}>
      批量下载
    </Button>
  ) : (
    <Popover
      visible={visible}
      content={download}
      trigger={['click']}
      placement="bottom"
      onVisibleChange={handleOpenChange}
    >
      <Button type={type} onClick={showFormatList} disabled={selectItems.length === 0}>
        下载
      </Button>
    </Popover>
  );
};
export default RecordDownload;
